<template>
  <div class="charts-components">
    <chart :options="options"
            :init-options="initOptions"
            auto-resize
            class="echarts-item">
    </chart>
  </div>
</template>

<script type="text/ecmascript-6">
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/graphic'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/title'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/legendScroll'
// import options from './echartsOptions.js'

export default {
  name: 'agebar-charts-components',
  components: {
    chart: ECharts
  },
  props: {
    options: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      initOptions: {
        renderer: 'canvas'
      }
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
  // scoped
  .charts-components {
    width: 100%;
    height: 100%;
    .echarts-item {
      width: 100%;
      height: 100%;
    }
  }
</style>
